<template>
    <div class="bigdata">
        <!-- canvas背景 -->
        <canvas ref="spaceCanvas" class="space-canvas"></canvas>

        <div class="big-top">
            <div class="top-item posi-left">
                <div>清远市清城区沙田分拣中心</div>
            </div>
            <div class="middle-item">
                广东猿收环保平台总览看板
            </div>
            <div class="top-item posi-right">
                <span>{{ currentime }}</span>
                <span>{{ currenweek }}</span>
            </div>
        </div>
        <div class="big-bottom ">
            <!-- 左列 -->
            <div class="left-box">
                <!-- 库存情况统计 -->
                <div class="item-box">
                    <span class="position"></span>
                    <span class="position"></span>
                    <span class="position"></span>
                    <span class="position"></span>
                    <div class="title">
                        库存情况统计
                    </div>
                    <div class="shu-chart" id="stockweight" style="height: 20vh;">

                    </div>
                </div>
                <div class="e-m-b-30"></div>
                <!-- 7天收货占比 -->
                <div class="item-box">
                    <span class="position"></span>
                    <span class="position"></span>
                    <span class="position"></span>
                    <span class="position"></span>
                    <div class="title">
                        7天收货占比
                    </div>
                    <div class="shu-chart" id="sevenday-type" style="height: 20vh;">

                    </div>
                </div>
                <div class="e-m-b-30"></div>
                <!-- 树状图 -->
                <div class="item-box">
                    <span class="position"></span>
                    <span class="position"></span>
                    <span class="position"></span>
                    <span class="position"></span>
                    <div class="title">
                        7日订单数据
                    </div>
                    <div class="shu-chart" id="sevenday-order" style="height: 20vh;">

                    </div>
                </div>
            </div>
            <!-- 中间列 -->
            <div class="middle-box">
                <div class="head">
                    <div class="head-center">
                        <div class="head-name">
                            今日回收重量{{ all.overview.weight }}KG
                        </div>
                        <div class="posi-box">
                            <div class="center">
                                <div class="center-item e-m-r-10" v-for="(item, index) in recoveryweight"
                                    :key="item.id">
                                    <countTo :startVal='0' :endVal='parseInt(item)' :duration='3000'></countTo>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="map">
                    <span class="position"></span>
                    <span class="position"></span>
                    <span class="position"></span>
                    <span class="position"></span>
                    <div class="map-center" id="container">

                    </div>
                </div>
                <div class="e-m-b-30"></div>
                <div class="flex">
                    <div class="item-box e-m-r-30" style="height: auto;">
                        <span class="position"></span>
                        <span class="position"></span>
                        <span class="position"></span>
                        <span class="position"></span>
                        <div class="title">
                            7天回收金额数据统计
                        </div>
                        <div class="shu-chart" id="sevenday-money" style="height: 20vh;">

                        </div>
                    </div>
                    <div class="item-box" style="height: auto;">
                        <span class="position"></span>
                        <span class="position"></span>
                        <span class="position"></span>
                        <span class="position"></span>
                        <div class="title">
                            7天回收重量数据统计
                        </div>
                        <div class="shu-chart" id="sevenday-weight" style="height: 20vh;">

                        </div>
                    </div>
                </div>
                <!-- <div class="progress">
                  <div class="pro-item">
                  <el-progress type="circle" :stroke-width="10" :width="95" color="#ffc107"
                      :percentage="Number(all.user.activityratio.toFixed(0))"></el-progress>
                  <div class="e-m-t-5">用户活跃率</div>
                  </div>
                  <div class="shu"></div>
                  <div class="pro-item">
                  <el-progress type="circle" :stroke-width="10" :width="95" color="#dc3545"
                      :percentage="Number(all.brother.activityratio.toFixed(0))"></el-progress>
                  <div class="e-m-t-5">小哥在线率</div>
                  </div>
                  <div class="shu"></div>
                  <div class="pro-item">
                  <el-progress type="circle" :stroke-width="10" :width="95" color="#57b8cd"
                      :percentage="Number(all.store.activityratio.toFixed(0))"></el-progress>
                  <div class="e-m-t-5">站点活跃率</div>
                  </div>
              </div> -->
            </div>
            <!-- 右列 -->
            <div class="right-box">
                <!-- 回收站点排行 -->
                <div class="item-box">
                    <span class="position"></span>
                    <span class="position"></span>
                    <span class="position"></span>
                    <span class="position"></span>
                    <div class="title">
                        回收站点排行
                    </div>
                    <div class="flex recycleSiteRank" v-for="(item, index) in recycleSiteRank.list" :key="index">
                        <div class="name">{{ item.name }}</div>
                        <el-progress class="e-flex-1 progress" :percentage="percent(item.value, recycleSiteRank.total)"
                            text-color="#ffffff"></el-progress>
                    </div>
                </div>
                <div class="e-m-b-30"></div>
                <!-- 回收重量数据对比 -->
                <div class="item-box">
                    <span class="position"></span>
                    <span class="position"></span>
                    <span class="position"></span>
                    <span class="position"></span>
                    <div class="title">
                        回收重量数据对比
                    </div>

                    <div class="shu-chart" id="sevenday-ratio" style="height: 20vh;">

                    </div>
                </div>
                <div class="e-m-b-30"></div>
                <!-- 最新订单 -->
                <div class="item-box">
                    <span class="position"></span>
                    <span class="position"></span>
                    <span class="position"></span>
                    <span class="position"></span>
                    <div class="title">
                        最新订单
                    </div>
                    <div class="records e-m-t-15 color-warning e-font-14">
                        <infinite-scroll :list="tableList" height="200px"></infinite-scroll>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
const mapData = require('@/plugins/QYMapData.json');

import * as echarts from 'echarts';
import countTo from 'vue-count-to';

export default {
    components: {
        countTo
    },
    head() {
        return {
            title: '大数据看板'
        }
    },
    data() {
        return {
            recycleTimer: null, // 添加定时器变量
            initDataTimer: null, // 添加初始化数据的定时器变量
            init: false,
            currentime: '',
            currenweek: '',
            tableList: [
                // {
                //   name: '小刘',
                //   address: '广东省清远市洲心街道风景天下26栋',
                //   number: '13612340923'
                // },
            ],
            // 回收站点排行
            recycleSiteRank: {
                list: [],
                total: 0
            },
            // 获取数据
            all: {
                overview: {
                    amount: 0,
                    estimatedweight: 0,
                    ordercount: 0,
                    quantity: 0,
                    weight: 0,
                }
            },
            recycle: {
                weight: 0,
            }
        }
    },
    filters: {
        numFilter(value) {
            // 截取当前数据到小数点后两位
            let realVal = parseFloat(value).toFixed(2)
            return realVal
        }
    },
    computed: {
        recoveryweight() {
            let arr = this.recycle.weight.toFixed(0).toString().split('')
            if (arr.length < 6) {
                let diff = 6 - arr.length
                for (let i = 0; i < diff; i++) {
                    arr.unshift('0')
                }
                return arr
            } else {
                return arr
            }
        },
        // brotherActivityratio() {
        //   return this.all.user.activityratio.toFixed(2)
        // }
    },
    mounted() {
        this.initSpace();

        this.getweek();
        this.getcurrentime();

        setInterval(() => {
            this.getcurrentime();
        }, 1000);

        this.init = false
        this.initData()
        this.getRecycle()

        this.recycleTimer = setInterval(() => {
            this.getRecycle()
            this.initData()
        }, 10 * 60 * 1000)
    },
    // 添加 beforeDestroy 钩子，在组件销毁前清理定时器
    beforeDestroy() {
        // 清理 recycleTimer 定时器
        if (this.recycleTimer) {
            clearInterval(this.recycleTimer);
            this.recycleTimer = null;
        }

        // 如果有其他定时器也需要清理
        // if (this.initDataTimer) {
        //     clearInterval(this.initDataTimer);
        //     this.initDataTimer = null;
        // }

        // 如果 getAll 中也有定时逻辑，也需要清理
    },
    methods: {
        initData() {
            this.getAll().then(() => {
                this.tableList = this.all.neworder
                if (this.init == false) {
                    this.initMap()
                }
                this.getRecycleSiteRank()
                this.getStockweight()
                this.getSevenDayEcharts()
                this.getSevenDayOrder()
                this.getSevenDayMoney()
                this.getSevenDayWeight()
                this.getSevenDayRatio()
                this.init = true
            })
        },
        // 获取数据
        getAll() {
            return this.$axios.get('/Statistics/OperatorBigData/Index', {
                params: {
                    operatorId: JSON.parse(localStorage.getItem('lifeData')).operatorid,
                    timeType: 0
                }
            }).then((res) => {
                this.all = res
                console.log(this.all)
            })
        },
        // 回收排行
        getRecycle() {
            let form = {
                timeType: 0
            }
            this.$axios.post('/Statistics/Franchise/Recycle', form).then((res) => {
                this.recycle = res
            }).catch((err) => {

            })
        },
        // canvas背景
        initSpace() {
            const canvas = this.$refs.spaceCanvas;
            const ctx = canvas.getContext('2d');

            // 设置canvas尺寸
            const resize = () => {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            };
            resize();
            window.addEventListener('resize', resize);

            // 星星配置
            const stars = [];
            const STAR_COUNT = 300; // 增加星星数量（原200）
            const STAR_SPEED = 0.3; // 加快运动速度（原0.1）
            const MIN_RADIUS = 1; // 新增最小半径
            const MAX_RADIUS = 2;   // 增大最大半径（原1.5）

            // 修改星星生成逻辑
            for (let i = 0; i < STAR_COUNT; i++) {
                stars.push({
                    x: Math.random() * canvas.width,
                    y: Math.random() * canvas.height,
                    radius: Math.random() * (MAX_RADIUS - MIN_RADIUS) + MIN_RADIUS, // 调整半径范围
                    alpha: Math.random() * 0.8 + 0.2 // 调整透明度范围（0.2-1.0）
                });
            }

            // 修改绘制逻辑（增强闪烁效果）
            const draw = () => {
                ctx.fillStyle = '#061626';
                ctx.fillRect(0, 0, canvas.width, canvas.height);

                stars.forEach(star => {
                    // 添加光晕效果
                    const gradient = ctx.createRadialGradient(
                        star.x, star.y, 0,
                        star.x, star.y, star.radius * 2
                    );
                    gradient.addColorStop(0, `rgba(87, 184, 205, ${star.alpha})`);
                    gradient.addColorStop(1, 'rgba(87, 184, 205, 0)');

                    ctx.beginPath();
                    ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
                    ctx.fillStyle = gradient;  // 改用渐变填充

                    // 增强动态效果
                    star.alpha += (Math.random() - 0.5) * 0.2; // 增加变化幅度（原0.1）
                    star.alpha = Math.max(0.2, Math.min(1, star.alpha)); // 保持最小可见度
                    star.x += STAR_SPEED * (0.5 + Math.random()); // 添加随机速度变化

                    if (star.x > canvas.width) {
                        star.x = 0;
                        star.y = Math.random() * canvas.height; // 重置时随机y轴位置
                    }

                    ctx.fill();
                });

                requestAnimationFrame(draw);
            };

            draw();
        },
        // 初始化地图
        initMap() {
            this.$AMapLoader.load({
                key: this.AMapSetting.key,             // 申请好的Web端开发者Key，首次调用 load 时必填
                version: this.AMapSetting.version,      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                // plugins: ['AMap.GeoJSON'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                // AMapUI: {
                //     plugins: ['geo/DistrictExplorer'] // geo
                // },
            }).then((AMap) => {
                let map = new AMap.Map("container", {  //设置地图容器id
                    // mapStyle: 'https://geohub.amap.com/mapstyle/clone?id=61e9560a0ba6b52e0f3ab95fd9ce146e',
                    mapStyle: 'amap://styles/darkblue',
                    zoom: 12, //设置地图的缩放级别
                    resizeEnable: true,
                    center: [113.042648, 23.625349], //初始化地图中心点位置
                });

                // 站点位置Marker：
                let marker = [];
                for (let i = 0; i < this.all.store.length; i++) {
                    marker[i] = new AMap.Marker({
                        // icon: '/images/amap/lianluozhan.png',
                        offset: new AMap.Pixel(-30, -30),
                        position: [this.all.store[i].lng, this.all.store[i].lat],   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                        title: '站点'
                    });
                    marker[i].content = '站点'
                    marker[i].location = [this.all.store[i].lng, this.all.store[i].lat]
                }
                map.add(marker);


                // 小哥位置Marker：
                // let brothermarker = []
                // for (let i = 0; i < this.all.brother.position.length; i++) {
                //     if (this.all.brother.position[i].lng != 0 && this.all.brother.position[i].lat != 0) {
                //         brothermarker[i] = new AMap.Marker({
                //             icon: '/images/amap/lajiche.png',
                //             offset: new AMap.Pixel(-30, -30),
                //             position: [this.all.brother.position[i].lng, this.all.brother.position[i].lat],   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                //             title: '小哥'
                //         });
                //         brothermarker[i].content = '小哥'
                //         brothermarker[i].location = [this.all.brother.position[i].lng, this.all.brother.position[i].lat]
                //     }
                // }
                // map.add(brothermarker);

                map.setFitView();

                // 点击标记点查看
                // var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
                // marker.forEach((item)=>{
                //     item.on('click', function(e){
                //         let obj = e.target

                //         infoWindow.setContent(obj.content);
                //         infoWindow.open(map, obj.location);
                //     });
                // })


                // var marker = new AMap.Marker({
                //     position: new AMap.LngLat(113.042648,23.625349),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                //     // icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                //     title: '站点',
                //     label:{
                //       content: '站点',
                //       offset : '20px',
                //       direction : 'top'
                //     }
                // });

                // AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer) => {

                //   const districtExplorer = new DistrictExplorer();
                //   districtExplorer.loadAreaNode(100000, (error, areaNode) => {
                //       if (error) {
                //           console.error(error);
                //           return;
                //       }
                //       const Json = areaNode.getSubFeatures(); // 获取Features

                //       console.log(Json)
                //   })
                // });
            }).catch(e => {
                console.log(e);
            })
        },
        // 获取星期几
        getweek() {
            var date = new Date();
            let str = '日一二三四五六';
            this.currenweek = '星期' + str[date.getDay()];
        },
        getcurrentime() {
            // 获取时间
            var date = new Date();
            this.currentime = this.utils.curDateTime(date);
        },
        //回收站点排行
        getRecycleSiteRank() {
            this.recycleSiteRank.list = []
            this.recycleSiteRank.total = 0

            let list = []
            let total = 0
            this.all.store.filter((item) => item.stockweight != 0).forEach((item, index) => {
                total += item.stockweight
                list.push({
                    name: item.name,
                    value: item.stockweight
                })
            })
            this.recycleSiteRank.total = total.toFixed(2)
            this.recycleSiteRank.list = list.sort((a, b) => b.value - a.value)
        },
        percent(weight, count) {
            // console.log(weight,count)
            let total = count
            if (total > 0) {
                return Number((weight / total * 100).toFixed(2))
            } else {
                return 0
            }
        },
        // 7天收货占比统计图
        getSevenDayEcharts() {
            var chartDom = document.getElementById('sevenday-type');
            var myChart = echarts.init(chartDom);
            var option;

            // 数据设置
            let data = []
            this.all.sevenday.type.forEach((item) => {
                data.push({
                    value: item.weight,
                    name: item.name
                })
            })

            option = {
                // backgroundColor: '#2c343c',
                tooltip: {
                    trigger: 'item',
                    // formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 10,
                    top: 20,
                    bottom: 20,
                    textStyle: {
                        color: '#57b8cd'
                    }
                },
                grid: {
                    top: '15%',
                    left: '2%',
                    right: '4%',
                    bottom: '2%',
                    containLabel: true
                },
                series: [
                    {
                        name: '可回收物(KG/件)',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                            // lineStyle: {
                            //     color: 'rgba(255, 255, 255, 0.3)'
                            // },
                            // smooth: 0.2,
                            // length: 10,
                            // length2: 20
                        },
                        // label: {
                        //     color: 'rgba(255, 255, 255, 0.3)'
                        // },
                        // itemStyle: {
                        //     color: '#c23531',
                        //     shadowBlur: 200,
                        //     shadowColor: 'rgba(0, 0, 0, 0.5)'
                        // },
                        data: data
                    }
                ]
            };

            option && myChart.setOption(option);
        },
        // 7天订单数据
        getSevenDayOrder() {
            var chartDom = document.getElementById('sevenday-order');
            var myChart = echarts.init(chartDom);
            var option;

            // 数据设置


            // 获取数据
            // var recyclinganddelivery = []
            //   // X轴：分类
            //   var type = ['上门单','站点-散客单','站点-客户单']
            // X轴：天
            var day = []
            // Y轴：回收量，站点-散客单，站点-客户单

            this.all.sevenday.near.forEach((item) => {
                day.push([this.utils.curDateTime(new Date(item.date), 'MM-dd'),item.onsite,item.fit,item.customer])
                // onsite.push(item.onsite)
                // fit.push(item.fit)
                // customer.push(item.customer)
            })

            var source = day
            console.log('7天订单数据source:',source)

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                dataset: {
                    source: source
                },
                legend: {
                    data: ['上门单', '站点-散客单', '站点-客户单'],
                    textStyle: {
                        // fontSize: 10, //字体大小
                        color: '#57b8cd' //字体颜色
                    }
                },
                grid: {
                    top: '15%',
                    left: '2%',
                    right: '4%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    // data: ['衣物', '纸类', '塑料', '金属'],
                    // data: type,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#57b8cd'
                        }
                    },
                    axisLine: {
                        show: true, //是否显示轴线
                        lineStyle: {
                            color: '#57b8cd', //刻度线的颜色
                            width: 2
                        }
                    },
                    //设置为虚线
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: '#57b8cd1f'
                        }
                    },

                    axisTick: {
                        alignWithLabel: true
                    },

                }],
                yAxis: [{
                    type: 'value',
                    // 刻度颜色
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#57b8cd'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: '#57b8cd85',
                        }
                    },
                }],
                series: [{
                    name: '上门单',
                    type: 'bar',
                    barWidth: '20%',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: "#4729FB" // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: "#1FB0F4" // 100% 处的颜色
                            }], false)
                        }
                    },
                },
                {
                    name: '站点-散客单',
                    type: 'bar',
                    barWidth: '20%',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: "#fd9314db" // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: "#fdf194" // 100% 处的颜色
                            }], false)
                        }
                    },
                },
                {
                    name: '站点-客户单',
                    type: 'bar',
                    barWidth: '20%',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: "#4fdcaa" // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: "#10beca" // 100% 处的颜色
                            }], false)
                        }
                    },
                }
                ]
            };
            option && myChart.setOption(option);

        },
        // 7天回收金额数据统计
        getSevenDayMoney() {
            var chartDom = document.getElementById('sevenday-money');
            var myChart = echarts.init(chartDom);
            var option;

            // X轴：天
            var day = []
            // y轴：回收金额
            var count = []

            this.all.sevenday.near.forEach((item) => {
                day.push(this.utils.curDateTime(new Date(item.date), 'MM-dd'))
                count.push(item.amount)
            })

            option = {
                xAxis: {
                    type: 'category',
                    data: day,
                    // 刻度颜色
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#57b8cd'
                        }
                    },
                    axisLine: {
                        show: true, //是否显示轴线
                        lineStyle: {
                            color: '#57b8cd', //刻度线的颜色
                            width: 2
                        }
                    },
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['回收金额(元)'],
                    textStyle: {
                        color: '#57b8cd' //字体颜色
                    }
                },
                grid: {
                    top: '15%',
                    left: '2%',
                    right: '4%',
                    bottom: '2%',
                    containLabel: true
                },
                yAxis: {
                    type: 'value',
                    minInterval: 1,
                    // 刻度颜色
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#57b8cd'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: '#57b8cd85',
                        }
                    },
                },
                series: [{
                    name: '回收金额(元)',
                    data: count,
                    type: 'line',
                    color: '#57b8cd'
                }]
            };

            option && myChart.setOption(option);
        },
        // 7天回收重量数据统计
        getSevenDayWeight() {
            var chartDom = document.getElementById('sevenday-weight');
            var myChart = echarts.init(chartDom);
            var option;

            // X轴：天
            var day = []
            // y轴：回收重量
            var count = []

            this.all.sevenday.near.forEach((item) => {
                day.push(this.utils.curDateTime(new Date(item.date), 'MM-dd'))
                count.push(item.weight)
            })

            option = {
                xAxis: {
                    type: 'category',
                    data: day,
                    // 刻度颜色
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#57b8cd'
                        }
                    },
                    axisLine: {
                        show: true, //是否显示轴线
                        lineStyle: {
                            color: '#57b8cd', //刻度线的颜色
                            width: 2
                        }
                    },
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['回收重量(KG)'],
                    textStyle: {
                        color: '#57b8cd' //字体颜色
                    }
                },
                grid: {
                    top: '15%',
                    left: '2%',
                    right: '4%',
                    bottom: '2%',
                    containLabel: true
                },
                yAxis: {
                    type: 'value',
                    minInterval: 1,
                    // 刻度颜色
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#57b8cd'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: '#57b8cd85',
                        }
                    },
                },
                series: [{
                    name: '回收重量(KG)',
                    data: count,
                    type: 'line',
                    color: '#57b8cd'
                }]
            };

            option && myChart.setOption(option);
        },
        // 7天回收数据环比
        getSevenDayRatio() {
            var chartDom = document.getElementById('sevenday-ratio');
            var myChart = echarts.init(chartDom);
            var option;

            // 数据设置


            // 获取数据
            // var recyclinganddelivery = []
            // X轴：分类
            var type = ['近七天', '上七天']
            // Y轴：回收量，站点-散客单，站点-客户单
            var source = [
                ['近七天', 0, 0],
                ['上七天', 0, 0],
            ]

            this.all.sevenday.near.forEach((item) => {
                source[0][1] = item.amount
                source[1][1] = item.weight
                // source[2][1] = item.onsite + item.fit + item.customer
            })
            this.all.sevenday.front.forEach((item) => {
                source[0][2] = item.amount
                source[1][2] = item.weight
                // source[2][2] = item.onsite + item.fit + item.customer
            })

            console.log('7天回收数据环比:',source)
            option = {
                legend: {
                    data: ['回收金额(元)', '回收重量(KG)'],
                    textStyle: {
                        // fontSize: 10, //字体大小
                        color: '#57b8cd' //字体颜色
                    }
                },
                tooltip: {},
                dataset: {
                    source: source
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#57b8cd'
                        }
                    },
                    axisLine: {
                        show: true, //是否显示轴线
                        lineStyle: {
                            color: '#57b8cd', //刻度线的颜色
                            width: 2
                        }
                    },
                    //设置为虚线
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: '#57b8cd1f'
                        }
                    },
                    axisTick: {
                        alignWithLabel: true
                    },
                },
                yAxis: [{
                    type: 'value',
                    // 刻度颜色
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#57b8cd'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: '#57b8cd85',
                        }
                    }, //设置为虚线
                    // X,Y轴线
                    // axisLine: {
                    //   show:true,//是否显示轴线
                    //   lineStyle: {
                    //     color: '#57b8cd',//刻度线的颜色
                    //     width:2,
                    //   }
                    // }
                }],
                grid: {
                    top: '15%',
                    left: '2%',
                    right: '4%',
                    bottom: '2%',
                    containLabel: true
                },
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [
                    {
                        name: '回收金额(元)',
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: "#4729FB" // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: "#1FB0F4" // 100% 处的颜色
                                }], false)
                            }
                        },
                    },
                    {
                        name: '回收重量(KG)',
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: "#4fdcaa" // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: "#10beca" // 100% 处的颜色
                                }], false)
                            }
                        },
                    }
                ]
            };
            option && myChart.setOption(option);

        },
        // 库存情况统计
        getStockweight() {
            var chartDom = document.getElementById('stockweight');
            var myChart = echarts.init(chartDom);
            var option;


            // 数据设置
            var type = []
            var data = []

            this.all.store.filter((item) => item.stockweight != 0).forEach((item, index) => {
                if (index < 5) {
                    type.push(item.name)
                    // type.push(`站点${index+1}`)
                    data.push(item.stockweight)
                }
            })

            var data = data.sort((a, b) => b - a)

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    top: '15%',
                    left: '2%',
                    right: '4%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: type,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#57b8cd'
                        },
                        // rotate: 45, // 旋转45度
                        interval: 0   // 显示所有标签
                    },
                    axisLine: {
                        show: true, //是否显示轴线
                        lineStyle: {
                            color: '#57b8cd', //刻度线的颜色
                            width: 2
                        }
                    },
                    //设置为虚线
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: '#57b8cd1f'
                        }
                    },

                    axisTick: {
                        alignWithLabel: true
                    },

                },
                yAxis: {
                    type: 'value',
                    // 刻度颜色
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#57b8cd'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'solid',
                            color: '#57b8cd85',
                        }
                    }, //设置为虚线
                    // X,Y轴线
                    // axisLine: {
                    //   show:true,//是否显示轴线
                    //   lineStyle: {
                    //     color: '#57b8cd',//刻度线的颜色
                    //     width:2,
                    //   }
                    // }
                },
                series: [
                    {
                        // name: '库存',
                        type: 'bar',
                        // barWidth: '20%',
                        // data: [200, 334, 330, 220],
                        data: data,
                        // color: '#dc3545e8', //总体颜色
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: "#4729FB" // 0% 处的颜色
                                }, {
                                    offset: 0.5,
                                    color: "#3077F7" // 50% 处的颜色
                                }, {
                                    offset: 1,
                                    color: "#1FB0F4" // 100% 处的颜色
                                }], false)
                            }
                        },
                    }
                ]
            };
            option && myChart.setOption(option);
        },

        //十分钟获取一次数据
        // componentTimerFun() {
        //     this.componentTimer = setInterval(() => {
        //         this.bsGetProductProcess();
        //     }, 1000 * 60 * 10);
        // },
        // //获取列表数据
        // bsGetProductProcess() {
        //     clearInterval(this.tableTimer);
        //     this.tableTop = 0;
        //     this.tableActionFun();
        // },
        // // 这步是获取完数据之后判断是否动
        // tableActionFun() {
        //     this.tableListSize = this.tableList.length;
        //     // 如果获取到的数据长度长于我框显示的条数
        //     if (this.tableListSize > this.visibleSize) {
        //         this.tableList = this.tableList.concat(this.tableList); //为了让数据很好的链接
        //         this.tableTimerFun();
        //     } else {
        //         // this.fillTableList(); 不动的时候的补充
        //     }
        // },
        // // 滚动时候的操作
        // tableTimerFun() {
        //     var count = 0;
        //     this.tableTimer = setInterval(() => {
        //         // 获取当前这个列表的高度
        //         if (count < (this.tableList.length / 2) * this.lineHeight) {
        //             this.tableTop -= 1;
        //             count++;
        //         } else {
        //             count = 0;
        //             this.tableTop = 0;
        //         }
        //     }, 50); //越小滚得越快
        // },

        // shuinit() {
        //     // 这个是图一
        //     var chartDom = document.getElementById('main');
        //     var myChart = echarts.init(chartDom);
        //     var option;

        //     // 获取数据
        //     var recyclinganddelivery = []
        //     // X轴：分类
        //     var type = []
        //     // Y轴：回收量，出货量
        //     var delivery = [] //出货量
        //     var recycling = [] //回收量
        //     recyclinganddelivery.filter((item) => item.type != "学校统货").forEach((item) => {
        //         type.push(item.type)
        //         delivery.push(item.delivery)
        //         recycling.push(item.recycling)
        //     })
        //     option = {
        //         tooltip: {
        //             trigger: 'axis',
        //             axisPointer: {
        //                 type: 'shadow'
        //             }
        //         },
        //         legend: {
        //             data: ['回收量', '出库量'],
        //             textStyle: {
        //                 // fontSize: 10, //字体大小
        //                 color: '#57b8cd' //字体颜色
        //             }
        //         },
        //         grid: {
        //             top: '15%',
        //             left: '2%',
        //             right: '4%',
        //             bottom: '2%',
        //             containLabel: true
        //         },
        //         xAxis: [{
        //             type: 'category',
        //             // data: ['衣物', '纸类', '塑料', '金属'],
        //             data: type,
        //             axisLabel: {
        //                 show: true,
        //                 textStyle: {
        //                     color: '#57b8cd'
        //                 }
        //             },
        //             axisLine: {
        //                 show: true, //是否显示轴线
        //                 lineStyle: {
        //                     color: '#57b8cd', //刻度线的颜色
        //                     width: 2
        //                 }
        //             },
        //             //设置为虚线
        //             splitLine: {
        //                 show: true,
        //                 lineStyle: {
        //                     type: 'dashed',
        //                     color: '#57b8cd1f'
        //                 }
        //             },

        //             axisTick: {
        //                 alignWithLabel: true
        //             },

        //         }],
        //         yAxis: [{
        //             type: 'value',
        //             // 刻度颜色
        //             axisLabel: {
        //                 show: true,
        //                 textStyle: {
        //                     color: '#57b8cd'
        //                 }
        //             },
        //             splitLine: {
        //                 show: true,
        //                 lineStyle: {
        //                     type: 'solid',
        //                     color: '#57b8cd85',
        //                 }
        //             }, //设置为虚线
        //             // X,Y轴线
        //             // axisLine: {
        //             //   show:true,//是否显示轴线
        //             //   lineStyle: {
        //             //     color: '#57b8cd',//刻度线的颜色
        //             //     width:2,
        //             //   }
        //             // }
        //         }],
        //         series: [{
        //             name: '回收量',
        //             type: 'bar',
        //             barWidth: '20%',
        //             // data: [200, 334, 330, 220],
        //             data: recycling,
        //             // color: '#dc3545e8', //总体颜色
        //             itemStyle: {
        //                 normal: {
        //                     color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
        //                         offset: 0,
        //                         color: "#4729FB" // 0% 处的颜色
        //                     }, {
        //                         offset: 0.5,
        //                         color: "#3077F7" // 50% 处的颜色
        //                     }, {
        //                         offset: 1,
        //                         color: "#1FB0F4" // 100% 处的颜色
        //                     }], false)
        //                 }
        //             },
        //         },
        //         {
        //             name: '出库量',
        //             type: 'bar',
        //             barWidth: '20%',
        //             // data: [300, 114, 50, 340],
        //             data: delivery,
        //             // color: '#fd9314db',
        //             itemStyle: {
        //                 normal: {
        //                     color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
        //                         offset: 0,
        //                         color: "#fd9314db" // 0% 处的颜色
        //                     }, {
        //                         offset: 0.5,
        //                         color: "#fdd765" // 50% 处的颜色
        //                     }, {
        //                         offset: 1,
        //                         color: "#fdf194" // 100% 处的颜色
        //                     }], false)
        //                 }
        //             },
        //         }
        //         ]
        //     };
        //     option && myChart.setOption(option);
        // },
        // lineinit() {
        //     // 这是图二
        //     var chartDom = document.getElementById('main1');
        //     var myChart = echarts.init(chartDom);
        //     var option;

        //     var quantitybyweek = []
        //     // X轴：星期
        //     var week = []
        //     // y轴：回收量
        //     var count = []
        //     quantitybyweek.forEach((item) => {
        //         week.push(item.hours)
        //         count.push(item.count)
        //     })

        //     option = {
        //         xAxis: {
        //             type: 'category',
        //             data: week,
        //             // 刻度颜色
        //             axisLabel: {
        //                 show: true,
        //                 textStyle: {
        //                     color: '#57b8cd'
        //                 }
        //             },
        //             axisLine: {
        //                 show: true, //是否显示轴线
        //                 lineStyle: {
        //                     color: '#57b8cd', //刻度线的颜色
        //                     width: 2
        //                 }
        //             },
        //         },
        //         tooltip: {
        //             trigger: 'axis'
        //         },
        //         legend: {
        //             data: ['回收金额(元)'],
        //             textStyle: {
        //                 color: '#57b8cd' //字体颜色
        //             }
        //         },
        //         grid: {
        //             top: '15%',
        //             left: '2%',
        //             right: '4%',
        //             bottom: '2%',
        //             containLabel: true
        //         },
        //         yAxis: {
        //             type: 'value',
        //             minInterval: 1,
        //             // 刻度颜色
        //             axisLabel: {
        //                 show: true,
        //                 textStyle: {
        //                     color: '#57b8cd'
        //                 }
        //             },
        //             splitLine: {
        //                 show: true,
        //                 lineStyle: {
        //                     type: 'dashed',
        //                     color: '#57b8cd85',
        //                 }
        //             },
        //         },
        //         series: [{
        //             name: '回收金额(元)',
        //             data: count,
        //             type: 'line',
        //             color: '#57b8cd'
        //         }]
        //     };

        //     option && myChart.setOption(option);
        // }
    }
}
</script>
<style scoped>
.pro-item>>>.el-progress__text {
    font-size: 1.6rem !important;
    color: #fff;
}

.space-canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    /* 确保在内容下方 */
    background: #000;
}
</style>
<style lang="scss" scoped>
.bigdata {
    // min-width: 1550px;
    width: 100%;
    // min-height: 1080px;
    height: 100vh;
    // background-image: url("@/static/images/bigdata.png");
    background-position: center;
    background-size: contain;
    // background-repeat: no-repeat;
    overflow: hidden;
    padding: 0px 30px 30px 30px;
    box-sizing: border-box;
    color: #57b8cd;

    .item-box {
        // flex: 1;
        // height: auto;
        width: 100%;
        height: 30vh;
        overflow: hidden;
        padding: 15px;
        box-sizing: border-box;
        border: 2px solid #57b8cd;
        position: relative;
        font-size: 12px;
        background-image: linear-gradient(-45deg, #57b8cd1f, transparent, #57b8cd1f);

        &:nth-child(3) {
            .title {
                padding-left: 5px;

            }

            .shu-chart {
                width: 100%;
                height: 225px;
            }
        }

        .position {
            position: absolute;
            height: 34px;
            width: 50px;
            background-image: url("@/static/images/one.png");
            background-position: center;
            background-size: cover;

            &:nth-child(1) {
                left: -6px;
                top: -7px;
            }

            &:nth-child(2) {
                background-image: url("@/static/images/two.png");
                right: -7px;
                top: -6px;
                height: 50px;
                width: 34px;
            }

            &:nth-child(3) {
                background-image: url("@/static/images/three.png");
                left: -7px;
                bottom: -6px;
                height: 50px;
                width: 34px;
            }

            &:nth-child(4) {
                background-image: url("@/static/images/four.png");
                right: -6px;
                bottom: -7px;
            }
        }

        .title {
            background-image: url("@/static/images/title.png");
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            width: 155px;
            height: 25px;
            box-sizing: border-box;
            padding-left: 5px;
            color: #fff;
            line-height: 25px;
        }
    }


    .big-top {
        width: 100%;
        height: 115px;
        display: flex;
        position: relative;

        // min-width: 1490px;
        .middle-item {
            text-align: center;
            line-height: 70px;
            font-weight: bold;
            font-size: 1.8rem;
            flex: 1;
            // min-width: 800px;
            min-width: 983px;
            background-image: url("@/static/images/head.png");
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
        }

        .top-item {
            height: 55px;
            // width: 430px;
            min-width: 430px;
            color: #57b8cd;
            line-height: 54px;
            font-size: 1.1rem;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            box-sizing: border-box;
        }

        .posi-left {
            padding-left: 15px;
            background-image: url("@/static/images/tl1.png");

            >div {
                width: 300px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .posi-right {
            padding-left: 130px;
            padding-right: 20px;
            background-image: url("@/static/images/tr1.png");
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

    }

    .big-bottom {
        width: 100%;
        height: calc(100vh - 150px);
        display: flex;
        margin-top: 10px;

        .left-box {
            display: flex;
            flex-direction: column;
            width: 28%;
            padding-right: 30px;
            box-sizing: border-box;

            .people {
                width: 100%;
                display: flex;

                .people-item {
                    flex: 1;
                    height: auto;
                    border: 1px solid #57b8cd;
                    padding: 20px;
                    padding-bottom: 40px;
                    position: relative;

                    &::after {
                        position: absolute;
                        content: "";
                        bottom: 5px;
                        left: 5px;
                        height: 0px;
                        width: 0px;
                        border-left: 10px solid #57b8cd;
                        border-bottom: 10px solid #57b8cd;
                        border-top: 10px solid transparent;
                        border-right: 10px solid transparent;
                    }

                    &::before {
                        position: absolute;
                        content: "";
                        top: 5px;
                        right: 5px;
                        height: 0px;
                        width: 0px;
                        border-left: 10px solid transparent;
                        border-bottom: 10px solid transparent;
                        border-top: 10px solid #57b8cd;
                        border-right: 10px solid #57b8cd;
                    }

                    .number {
                        font-size: 3rem;
                        font-weight: bold;
                        display: flex;
                        // align-items: center;
                        justify-content: center;

                        .danwei {
                            font-weight: normal;
                            font-size: 1rem;
                            padding-top: 35px;
                            padding-left: 10px;
                        }
                    }

                    .text {
                        text-align: center;
                        color: #fff;
                        font-size: 1rem;
                        padding: 20px 0px;
                        padding-top: 10px;
                    }

                    .radius {
                        display: flex;
                        width: 103%;

                        .center {
                            display: flex;
                            margin: 0 auto;
                            border-radius: 15px;
                            box-sizing: border-box;
                            padding: 5px 20px;
                            background-color: #57b8cd;

                            span {
                                color: #000;
                            }

                            .r-number {
                                background-color: #000;
                                box-sizing: border-box;
                                padding: 0px 10px;
                            }
                        }
                    }
                }
            }

            .number-top {
                // margin: 10px 0px;
                display: flex;
                justify-content: space-around;
                align-items: flex-end;

                .n-left {
                    font-size: 3rem;
                    font-weight: bold;
                }

                .n-right {
                    padding-bottom: 7px;
                    box-sizing: border-box;
                    color: #007bff;
                    font-size: 1.2rem;
                }
            }

            .gradient {
                width: 100%;
                height: 15px;
                background-image: linear-gradient(to right, transparent, #ffc107, transparent);
                margin-bottom: 20px;
            }
        }

        .middle-box {
            flex: 1;
            // min-width: 740px;
            box-sizing: border-box;
            padding-top: 45px;
            display: flex;
            flex-direction: column;

            .head {
                width: 100%;
                height: auto;
                display: flex;
                align-items: center;
                justify-content: center;

                .head-center {
                    width: 90%;
                    height: 100px;
                    background-image: url("@/static/images/ban.png");
                    background-position: center;
                    background-size: contain;
                    background-repeat: no-repeat;
                    position: relative;
                    display: flex;
                    align-items: flex-end;
                    justify-content: center;

                    .head-name {
                        color: #fff;
                        font-size: 1.3rem;
                        box-sizing: border-box;
                        padding-bottom: 5px;
                    }

                    .posi-box {
                        width: 100%;
                        height: 100px;
                        position: absolute;
                        top: -50px;
                        display: flex;
                        align-items: flex-end;
                        justify-content: center;

                        .center {
                            width: 450px;
                            height: auto;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            .center-item {
                                flex: 1;
                                height: 90px;
                                border: 1px solid #57b8cd;
                                border-radius: 7px;
                                background-color: #57b8cd38;
                                text-align: center;
                                line-height: 85px;
                                color: #fff;
                                font-size: 5rem;
                                font-weight: bold;
                            }
                        }
                    }
                }

            }

            .map {
                width: 100%;
                height: auto;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 30px auto 0;
                border: 2px solid #57b8cd;
                position: relative;
                flex: 1;

                .position {
                    position: absolute;
                    height: 34px;
                    width: 50px;
                    background-image: url("@/static/images/one.png");
                    background-position: center;
                    background-size: cover;

                    &:nth-child(1) {
                        left: -6px;
                        top: -7px;
                    }

                    &:nth-child(2) {
                        background-image: url("@/static/images/two.png");
                        right: -7px;
                        top: -6px;
                        height: 50px;
                        width: 34px;
                    }

                    &:nth-child(3) {
                        background-image: url("@/static/images/three.png");
                        left: -7px;
                        bottom: -6px;
                        height: 50px;
                        width: 34px;
                    }

                    &:nth-child(4) {
                        background-image: url("@/static/images/four.png");
                        right: -6px;
                        bottom: -7px;
                    }
                }

                .map-center {
                    width: 100%;
                    height: 100%;
                    // background-image: url("@/static/images/map.png");
                    background-position: center;
                    background-size: cover;
                }
            }

            .progress {
                width: 100%;
                height: auto;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .shu {
                    width: 1px;
                    height: 70px;
                    background-color: grey;
                }

                .pro-item {
                    text-align: center;
                    flex: 1;
                    color: #fff;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }
            }
        }

        .right-box {
            display: flex;
            flex-direction: column;
            width: 28%;
            padding: 0px;
            padding-left: 30px;
            box-sizing: border-box;

            .item-box {
                .records {
                    width: 100%;
                    height: 90%;
                    box-sizing: border-box;
                    overflow: hidden;
                    position: relative;

                    ul {
                        width: 100%;
                        box-sizing: border-box;
                        padding: -1px 35px;
                        position: absolute;
                        left: 0px;

                        li {
                            width: 100%;
                            height: 30px;
                            line-height: 30px;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            // .flex-item {
                            //   &:nth-child(2) {
                            //     width: 260px;
                            //     overflow: hidden;
                            //     text-overflow: ellipsis;
                            //     white-space: nowrap;
                            //     text-align: center;
                            //   }
                            // }
                            .flex-item {
                                width: 260px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                text-align: center;
                                margin: 0 10px;
                            }
                        }
                    }
                }
            }
        }
    }
}

.recycleSiteRank {
    padding: 10px 0;
    white-space: nowrap;

    .name {
        font-size: 14px;
        width: 33.33%;
        padding-right: 20px;
    }
}
</style>